<template>
<view class="page">
	<view class="top_img">
		<image class="top_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/bank/1666420198114.png" mode=""></image>
	</view>
	<view class="content_div">
		<view class="c_left">
			<view class="type_item" @click="changeType(item.id)" :class="{active:type_id==item.id}" v-for="(item,index) in typeList" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="c_right">
			<view class="ss_div">
				<input type="text" placeholder="请输入关键词或名称" v-model="keywords" confirm-type="search" @confirm='changeK'/>
			</view>
			<scroll-view scroll-y="true" style="height: calc(100% - 40px)" :scroll-top='top' :lower-threshold='100' @scrolltolower='getMore'>
				<view class="list_item" v-for="(item,imdex) in list" :key="index" @click="toDetail(item.id)">
					<image :src="item.thumb" mode=""></image>
					<view class="item_content">
						<view class="item_name">{{item.name}}</view>
						<view class="item_num" v-if="item.price>0">
							<text>￥</text>{{item.price*1}}
						</view>
						<view v-else class="item_num" style="font-size: 16px;">
							免费
						</view>
					</view>
				</view>
				<endlist :isLoad='isLoad' :isfinsh='isfinsh' :length='list.length'></endlist>
			</scroll-view>
		</view>
	</view>
</view>
</template>

<script>
	import {jinrong} from '@/utils/api.js'
	import endlist from '@/components/endlist.vue'
	export default {
		data() {
			return {
				typeList:[],
				list:[],
				type_id:'',
				page:1,
				total:0,
				isLoad:false,
				isfinsh:false,
				keywords:''
			}
		},
		components:{
			endlist
		},
		onLoad(option){
			this.type_id = option.id||''
			jinrong.getServiceType({role_id:uni.getStorageSync('role_id')}).then(res=>{
				res.data.unshift({id:'',name:'全部'})
				this.typeList = res.data
			})
			this.getList()
		},
		methods: {
			toDetail(id){
				uni.navigateTo({
					url:`/pages/companyFwDetail/companyFwDetail?id=${id}`
				})
			},
			changeType(id){
				this.page = 1
				this.isfinsh = false
				this.type_id = id
				this.list = []
				this.getList()
			},
			changeK(){
				this.page = 1
				this.isfinsh = false
				this.list = []
				this.getList()
			},
			getMore(){
				this.page+=1
				this.getList()
			},
			getList(){
				this.isLoad = true
				jinrong.getServiceList({keywords:this.keywords,page:this.page,role_id:uni.getStorageSync('role_id'),type_id:this.type_id}).then(res=>{
					this.list.push(...res.data.data)
					this.total = res.data.total
					this.isLoad = false
					if(res.data.last_page<=this.page){
						this.isfinsh = true
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
page,.page{
	width: 100%;
	height: 100%;
}
.top_img{
	width: 100%;
	height: 180px;
	image{
		width: 100%;
		height: 180px;
	}
}
.content_div{
	height: calc(100% - 180px);
	display: flex;
	justify-content: space-between;
	.c_left{
		height: 100%;
		overflow-y: auto;
		width: 80px;
		background: #F8F8F8;
	}
	.c_right{
		height: 100%;
		width: calc(100% - 90px);
		background: #fff;
	}
	.ss_div{
		padding: 0 10px;
		height: 40px;
		display: flex;
		align-items: center;
		input{
			font-size: 15px;
			width: 100%;
		}
	}
	.type_item{
		height: 46px;
		line-height: 46px;
		padding-left: 14px;
		background: #F8F8F8;
		color: #333;
		position: relative;
		font-size: 14px;
	}
	.active{
		background: #fff;
		font-weight: 600;
		&::after{
			content: ' ';
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 3px;
			background-color: #01b3ff;
		}
	}
}
.list_item{
	width: calc(100% - 30px);
	padding: 10px;
	border-radius: 8px;
	height: 70px;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
	display: flex;
	margin-bottom: 10px;
	image{
		height: 100%;
		width: 90px;
		margin-right: 12px;
	}
	.item_content{
		width: calc(100% - 102px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.item_name{
			font-size: 15px;
		}
	}
	.item_num{
		font-size: 20px;
		color: #B7191E;
		text{
			font-size: 14px;
		}
	}
}
</style>
